import {
  Scene,
  Image,
  Text,
  Utils,
  Tween,
  Easing,
} from '../../../src';

const LOG_KEY = '[TestScene]';

export class TestScene extends Scene {
  imgTest001: HTMLImageElement;

  async init () {
    console.log(LOG_KEY, 'init');

    document.addEventListener('keydown', (event) => {
      console.log(event.key);
    }, false);
  }

  async preload () {
    this.imgTest001 = await Utils.loadImg('/assets/images/smile.png');
  }

  async create () {
    const img = new Image({
      img: this.imgTest001,
      x: 0,
      y: 0,
      width: 120,
      height: 120,
    });
    this.add(img);

    const text = new Text({
      x: 0,
      y: 0,
      text: 'Let smile decorate life',
      color: '#fff',
      stroke: 'red',
      fontStyle: {
        fontSize: 32,
      },
    });
    console.log(text);
    this.add(text);

    console.log('img', img);
    console.log('rotate', img.rotate);
    setTimeout(() => {
      console.log('rotate', img.rotate);
    }, 4000);

    const tween = new Tween({
      targets: [img],
      attrs: {
        x: 300,
        y: 400,
        // rotate: -600,
        // skewX: 400,
      },
      duration: 3000,
      easing: Easing.Bounce.In,
    });
    this.addTween(tween);
    tween.start();
    // setTimeout(() => {
    //   tween.pause();
    // }, 500);
    // setTimeout(() => {
    //   tween.start();
    // }, 1500);

    const tween2 = new Tween({
      targets: [text],
      attrs: {
        x: 800,
        y: 400,
        rotate: -260,
        skewX: 100,
        skewY: 200,
      },
      duration: 4000,
      easing: Easing.Sinusoidal.Out,
    });
    this.addTween(tween2);
    tween2.start();
  }
}